/************************************************************************************************************
	RESET
 ************************************************************************************************************/
body {
    font-family: Arial;
    font-size: 10px;
}
html {
	direction: rtl;
}
html, body, ul, li, h1, h2, h3, h4 {
    padding: 0;
    margin: 0;
}
ul, li {
    list-style: none;
}

img {
    border: 0 none;
}

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
@media all and (max-width: 480px) {
    body {
        width: 100%;
    }
	#container {
		width: 100%;
	}
}

/* HEADER */
#banners {
    background: url('../Images/backgrounds.sprite.png') 0 0 repeat-x #3f3f3f;
    padding: 9px 0;
	text-align: center;
}
    .banner {
		display: inline-block;
		height: 65px;
		margin: 0 4px;
		text-decoration: none;
		}

    /** Breadcrumbs Navigation **/
    header #bcnav {
        background: url('../Images/backgrounds.sprite.png') left -100px repeat-x;
        height: 86px;
        position: relative;
		margin-bottom: -9px;
    }
	header #bcnav.searchOpened ul {
		display: none;
	}

		#bcnav .orange {
			display: block;
			width: 52px;
			height: 52px;
			position: absolute;
			top: 12px;
			right: 12px;
		}
	
		header #bcnav  ul {
			display: block;
			background: url('../Images/menu.sprite.png') top left no-repeat;
			padding-top: 13px;
			padding-bottom: 12px;
			padding-right: 70px;
		}
			header #bcnav li {
				float: right;
				background: url("../Images/menu.sprite.png") left -100px no-repeat;
				height: 52px;

				padding-left: 22px;
				display: block;

				
			}
				header #bcnav li a {
					display: block;
					height: 41px;
					padding-right: 12px;
					line-height: 50px;
					font-size: 21px;
					text-decoration: none;
					color: #fff;
				}

    /** Search **/
    #search {
        position: absolute;
        left: 0; top: 12px;
        z-index: 30;
		height: 53px;
		overflow: hidden;		
		width: 51px;
		
    }
        #searchbtn {
            display: block;
            width: 48px; height: 59px;
			position: absolute;
			left: 0; top: 0;
			z-index: 35;
			background: url("../Images/search.png") top left no-repeat;
        }
            #searchbtn span {
                display: none;
            }
		
		#searchinput {
            height: 59px;	
			color: #000;
			margin-left: 50px;
			display: block
		}
        #sinput {
			font-size: 2.2em;
			color: #000;
			background: transparent;
			width: 100%;
			height: 50px;
			border: none;
			background: url("../Images/search.input.background.gif") repeat-x;
			border-bottom-right-radius: 5px;
			border-top-right-radius: 5px;
        }

	#search.closed {
		width: 51px;
		left: 0;
		-webkit-transition: all 300ms;
		transition: all 300ms;		
	}
	#search.closed input {
		background: none;
	}
	
	#search.closed a {
		background-position: 100% 0;
	}
	
	#search.opened {
		width: 458px;
		left: 11px;
		-webkit-transition: all 300ms;
		transition: all 300ms;		
	}
		
	@media all and (min-width: 481px) {
		#search,
		#search.closed,
 		#search.opened {
			left: 9px;
			width: 250px;
		}
		
	#search.closed input {
		background: url("../Images/search.input.background.gif") repeat-x;
	}
	
	#search.closed a {
		background-position: 0 0;
	}		
	}
	
/** Top Navigation Tabs **/
#toptabs {
    background: url("../Images/nav-inactive.png") top left repeat-x;
    height: 62px;
}
#toptabs.alt {
	background-image: url("../Images/nav-inactive-white.png");
}
    #toptabs li {
        float: right;
        width: 33.3%;
        height: 62px;
    }
        #toptabs li a {
            display: block;
            line-height: 47px;
            color: #FFF;
            font-size: 20px;
            text-align: center;
            text-decoration: none;
			border-right: 1px solid #454545;
        }
		#toptabs li:first-child a,
		#toptabs li.active a {
			border: none;
		}
    #toptabs li.active {
        background: url("../Images/nav-active-pointerb.png") 50% 43px no-repeat, url("../Images/nav-active.png") top left repeat-x;
    }
	#toptabs.alt li.active {
		background: url("../Images/nav-active-pointerb-white.png") 50% 43px no-repeat, url("../Images/nav-active-white.png") top left repeat-x;
	}

/** Footer **/
footer {
   background: url("../Images/backgrounds.sprite.png") left -300px repeat-x;
   overflow: hidden;
}
    footer a {
        float: left;
        width: 49.8%;
        height: 53px;        
		background: url("../Images/backgrounds.sprite.png") left -400px no-repeat;
		color: #FFF;
		text-decoration: none;
		text-align: center;
		text-shadow: #676767 1px 1px 1px;
		font-size: 20px;
		font-weight: bold;
        line-height: 51px;
    }
		footer a:first-child {
			background: none;
		}

/** Recurring Elements **/
#content h2 {
    background: url("../Images/backgrounds.sprite.png") left -200px repeat-x;
    height: 50px;
    line-height: 2em;
    text-indent: 0.5em;
    padding: 0;
    margin: 0;
    font-size: 2.5em;
    direction: rtl;
    color: #fff;
	text-shadow: #676767 1px 1px 1px;

}
	#content h2.alt,
	#content h2.alt2 {
		font-weight: normal;
	}
	#content h2.alt {
		background-image: url("../Images/title-bg-alt2.png");
	}
	#content h2.alt2 {
		background-image: url("../Images/title-bg-alt1.png");
	}
#content p {
	font-size: 2.2em;
	color: #494949;
	padding: 0 0.5em;
}
#content table {
	margin: 0.5em 0.5em 0 0.5em;
	font-size: 2.2em;
	text-align: right;
}
.info {
	padding-bottom: 1.2em;
	background: url("../Images/item-bg.png") bottom left repeat-x #FFF;
}
.note {
	background-color: #eaeaea;
	padding: 1em 0;
}
.note  p {
	margin: 0;
}

#content th {
	padding-left: 0.5em;
}
.pt {
	padding-top: 1.5em;
}

/** Effects and Other Veggies **/
.inset {
    text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}
.whitebg {
    background: #FFF;
}

/** Content **/
#content {
    background-color: #fff;
}

/** Grid and Glowing Grid **/
.glowgrid {
    background:
        url("../Images/sep-v.png") 33.3% top no-repeat,
        url("../Images/sep-v.png") 66.6% top no-repeat,
        url("../Images/sep-h.png") 50% top repeat-y,
        url("../Images/row-glow.png") 50% top repeat-y;
        background-size:
            2px 100%,
            2px 100%,
            100% 82px,
            100% 82px;
}
.glowgrid.t2 {
    background:
        url("../Images/sep-v.png") 33.3% -30em no-repeat,
        url("../Images/sep-v.png") 66.6% -30em no-repeat,
        url("../Images/sep-h.png") 50% top repeat-y,
        url("../Images/row-glow.png") 50% top repeat-y;
        background-size:
            2px 300%,
            2px 300%,
            100% 62px,
            100% 62px;
	padding-bottom: 7px;
}
    .glowgrid li {
        float: right;
        width: 33.3%;
        height: 60px;
        text-align: center;
    }
    .glowgrid li a {
        display: block;
		height: 100%;
        font-size: 25px;
		line-height: 60px;
        color: #000;
        text-decoration: none;
    }
	@media all and (min-width: 481px) {
		.glowgrid.t2 {
			background:
				url("../Images/sep-v.png") 25% -30em no-repeat,
				url("../Images/sep-v.png") 50% -30em no-repeat,
				url("../Images/sep-v.png") 75% -30em no-repeat,
				url("../Images/sep-h.png") 50% top repeat-y,
				url("../Images/row-glow.png") 50% top repeat-y;
				background-size:
					2px 300%,
					2px 300%,
					2px 300%,
					100% 63px,
					100% 62px;
		}		
		.glowgrid li  {
			width: 25%;
		}	
	}
/** Items Listing **/
ul.items {

}
    #current-item,
    ul.items li {
        background: url("../Images/item-bg.png") bottom left repeat-x #FFF;
        direction: rtl;
    }
		#current-item .item,
		ul.items li .item {
			text-decoration:none;
			display: block;
			padding: 10px;
			overflow: hidden;
		}
		
		ul.items li:first-child a {
			
			background: url("../Images/backgrounds.sprite.png") left -500px repeat-x;
		}
		
		ul.items li.detail p {
			font-size: 2.2em;
			color: #4B4B4B;
			padding: 0;
			margin: 0;
		}
	#current-item img,
    .items img {
        width: 10.1em;
        height: 10.1em;
        float: right;
        margin-left: 1.5em;
		border: 1px solid #c5c5c5;
    }
	#current-item h3,
    .items h3 {
        font-size: 2.5em;
        color: #000;
        line-height: 1em;
    }
	#current-item details,
	#current-item .price,
    .items details,
    .items .price {
        font-size: 2.2em;
        color: #494949;
        display: block;
    }
	.items .detail {
		padding: 10px;
	}
    .items .like {
        margin-top: 2em;
        float: left;
        background: url("../Images/actionable.png") top left no-repeat;
        height: 1.2em;
        padding: 0 0 0 36px;
        font-size: 2.2em;
        color: #3B5998;
    }
    .items .pick {
        float: left;
        clear: left;
        background: url("../Images/actionable.png") bottom left no-repeat;
        height: 1.2em;
        padding: 0 0 0 36px;
        font-size: 2.2em;
        color: #F60;
        display: block;
        font-weight: bold;
    }

/** Simple List **/
.simplelist {

}
    .simplelist li {
        background: url("../Images/item-bg.png") bottom left repeat-x #FFF;
        direction: rtl;
		
    }
        .simplelist li a {
            background: url("../Images/li.png") 1em 50% no-repeat;
            display: block;
            font-size: 2.5em;
            color: #000;
            text-decoration: none;
            line-height: 2.5em;
			padding: 12px;
        }
		.simplelist li img {
			float: right;
			width: 2.5em;
			height: 2.5em;
			float: right;
			margin-left: 1.5em;
			border: 1px solid #c5c5c5;
		}

/* Item Page */
#current-item .button {
	display: block;
	width: 222px;
	height: 47px;
	margin-right: 5.5em;
	background: url("../Images/buttons.sprite.png");
	text-align: center;
	color: #fff;
	font-size: 2.1em;
	font-weight: bold;
	line-height: 47px;
	text-shadow: #cf5d14 1px 1px 1px;
}
	#facebook {
		color: #fff;
		padding-right: 120px;
		background: url("../Images/buttons.sprite.png") 100% -182px no-repeat #3b5998;
		position: relative;
	}
		#facebook  p {
			margin: 0.5em 0;
			padding: 0.5em 0;
			color: #fff;
			line-height: 0.9em;
		}
		#facebook .share, 
		#facebook .like {
			display: block;
			width: 101px;
			height: 41px;
			position: absolute;
			top: 10px;
			left: 10px;
			background: url("../Images/buttons.sprite.png") 0 -250px no-repeat;
			font-size: 1.8em;
			line-height: 40px;
			color: #3b5998;
			text-align: center;
			text-decoration: none;
		}
		#facebook .like {
			background: url("../Images/buttons.sprite.png") -150px -250px no-repeat;
			text-align: right;
			text-indent: 15px;
			left: 115px;
		}
#screenshots {
	padding: 27px 0;
	overflow: hidden;
	background: url("../Images/backgrounds.sprite.png") bottom left repeat-x #FFF;
}

.download-button {
	display: block;
	width: 380px;
	height: 58px;
	background: url("../Images/buttons.sprite.png") 0 -100px no-repeat;
	text-align: center;
	color: #fff;
	font-size: 3.5em;
	font-weight: bold;
	line-height: 47px;
	text-shadow: #cf5d14 1px 1px 1px;	
	text-decoration: none;
	margin: 0.5em auto;
}

/* Carousel */
.carousel {
	background: url("../Images/carousel.sprite.png") center top no-repeat;
	display: block;
	margin: 0 auto;
	width: 212px;
	height: 300px;
	position: relative;
	text-align: center;
	
}
	.carousel .wrapper {
		display: block;
		width: 212px;
		height: 250px;
		overflow: hidden;
		position: relative;
		right: 1px;
		top: 2px;
		margin-bottom: 24px;
	}
		.carousel .images {
			position: absolute;
			left: 0;
			top: 0;
		}
			.carousel li {
				float: left;
			}
		.carousel .arr-right,
		.carousel .arr-left {
			display: block;
			width: 42px;
			height: 47px;	
			position: absolute;
			top: 100px;	
			background: url("../Images/carousel.sprite.png") -50px -300px no-repeat;
		}
		.carousel .arr-right {
			background-position: 0 -300px;
			right: -60px;
		}
		.carousel .arr-right.disabled {
			background-position: 0 -350px;
		}
		.carousel .arr-left {
			background-position: -50px -300px;
			left: -60px;
		}
		.carousel .arr-left.disabled {
			background-position: -50px -350px;
		}
		.carousel #bullets  {
			height: 66px;
			display: inline-block;
		}
			.carousel #bullets li {
				display: inline-block;
				width: 22px;
				height: 22px;
				margin: 0 5px; 
				background: url("../Images/carousel.sprite.png") -150px -300px no-repeat;
			}
			.carousel #bullets .current {
				background-position: -150px -350px;
			}